<template>
    <div class="home" v-wechat-title="$route.meta.title">
        <div class="banner">
            <img src="../assets/image/banner.png" alt="">
        </div>
        <div class="floor_1">
            <img src="../assets/image/floor_1.png" alt="">
        </div>
        <div class="floor_2">
            <div class="left">
                <img src="../assets/image/floor_2.png" alt="">
            </div>
            <div class="right">
                <img class="logo" src="../assets/image/logo.png" alt="">
                <em>小二哥干活APP</em>
                <em>是为了雇主和工人双方，找人找活方便而研发的第三方平台。</em>
                <ol>
                    <li>平台信誉系统可以为双方提供信用保障，解决雇主担心工人干活态度的问题，也解决工人担心工钱的问题。</li>
                    <li>可以实时呼叫工人，随用随叫。</li>
                    <li>也可以今天定明天干活的工人，实现预约用工。</li>
                    <li>提供全国联网的各大企业的劳务派遣工作。</li>
                    <li>绕过所有中间环节，发布用工信息的招工广场，实现雇主工人双方直接沟通。</li>
                </ol>
                <a href="#">了解更多小二哥科技</a>
            </div>
        </div>
        <div class="floor_3">
            <span class="title">新闻资讯</span>

            <swiper class="swiper_wrap" ref="mySwiper" :options="swiperOptions">
                <swiper-slide v-for="(item, index) in newsPage" :key="index">
                    <NewsCard v-for="(e,i) in item" :key="i" :detail="e" />
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>

        </div>
        <div class="floor_4">
            <span class="title">合作伙伴</span>
            <span class="dec">超过5万次合作，为一百余家全球知名企业实现用工配套无缝对接</span>
            <img src="../assets/image/logo_group.png" alt="">
        </div>
    </div>
</template>

<script>
import { newsList } from './news/data'
import _ from 'lodash'

export default {
    name: "Home",
    components: {
        NewsCard: () => import("@/components/NewsCard.vue"),
    },
    data() {
        return {
            swiperOptions: {
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                }
            },
        };
    },
    computed:{
        // 分组
        newsPage(){
            return _.chunk(newsList, 6);
        }
    },
    created() {
        // console.log(this.$route.meta.title)
    },
    mounted() { },
    methods: { },
};
</script>
<style lang="less" scoped>
.home {
    width: 1920px;
    margin: 0 auto;

    .banner {
        width: 100%;
        height: 860px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 100%;
        }
    }

    .floor_1 {
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .floor_2 {
        width: 100%;
        height: 760px;
        background: #F5F5F5;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            width: 830px;
            height: 100%;

            img {
                width: 588px;
                height: 497px;
                margin: 149px auto 0 100px;
            }
        }

        .right {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .logo {
                width: 239.69px;
                height: 65px;
                margin-bottom: 56px;
                margin-left: 24px;
            }

            em {
                font-family: PingFang SC;
                font-style: normal;
                font-weight: 600;
                font-size: 24px;
                line-height: 36px;
                color: #000000;
                margin-left: 24px;
            }

            ol {
                margin-top: 30px;
                margin-bottom: 52px;
                padding-left: 22px;

                li {
                    list-style: disc;
                    font-weight: 600;
                    font-size: 20px;
                    line-height: 35px;
                }
            }

            a {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 218px;
                height: 51px;
                border: 2px solid #000000;
                box-sizing: border-box;
                border-radius: 25px;
                text-decoration: none;
                color: #000000;
                font-size: 18px;
            }

        }
    }

    .floor_3 {
        width: 100%;
        height: 760px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            font-weight: 500;
            font-size: 40px;
            display: inline-block;
            margin: 80px auto 100px auto;
        }

        /deep/.swiper_wrap {
            margin: 0 auto;
            flex: 1;
            width: 1440px;

            .swiper-slide {
                height: calc(100% - 150px);
                padding-bottom: 150px;
            }

            .swiper-pagination-bullet {
                width: 10px;
                height: 10px;
                border-radius: 11px;
                background: #C4C4C4;
                margin: 0 12px;
                transition: width .3s;
            }

            .swiper-pagination-bullet-active {
                width: 21px;
                height: 10px;
                background: #FFCF00;
                border-radius: 11px;
            }
        }

        // 指示器位置
        .swiper-pagination-fraction,
        .swiper-pagination-custom,
        .swiper-container-horizontal>.swiper-pagination-bullets {
            bottom: 69px;
        }

    }

    .floor_4 {
        width: 100%;
        height: 760px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            font-weight: 500;
            font-size: 40px;
            display: inline-block;
            margin: 129px auto 20px auto;
        }

        .dec {
            font-size: 22px;
            color: #999999;
            margin: 0 auto 47px auto;
        }

        img {
            width: 1480px;
            height: 391px;
            margin: 0 auto;
        }
    }
}</style>
